:host {
    width: 100%;
    height: 100%;

    .collapse {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        background-color: #ffffff0a;
        overflow: hidden;

        .panel {
            display: flex;
            flex-direction: column;

            &.expanded {
                margin-bottom: auto;
                height: 100%;
            }

            &.collapsed {
                .content {
                    display: none;
                }
            }

            .header {
                height: 32px;
                display: flex;
                flex-direction: row;
                align-items: center;
                cursor: pointer;
                background-color: #fafafa;

                :host-context(.night) & {
                    background-color: #202020;
                }

                .toggle {
                    margin-left: 10px;
                }

                .title {
                    flex: 1;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    margin: 0 10px;
                }

                [nz-button] {
                    margin-right: 6px;
                }
            }

            .content {
                flex: 1;
                background-color: #fff;
                overflow-y: auto;

                :host-context(.night) & {
                    background-color: #141414;
                }
            }
        }
    }
}
